<style>
html,body{width:100%;height:100%;overflow:hidden;position: relative;}
.bg {
	width: 100%;
	position: absolute;
	left: 0;
	top: 0;
	z-index: -1;
	min-height: 100%;
}

.rule {
	position: absolute;
	width: 100%;
	top: 75%;
	margin-bottom: 0;
	height: 25%;
}

.word {
	display: inline-block;
	padding: 0 11px 5px 12px;
	position: absolute;
}

.word b {
	color: orangered;
	font-size: 12px;
}

{if $rate <= 0.65}/*以0.65为界*/
.word1 {
	top: {php echo 10+6*$rate*1/$edge}%;
	left: {php echo 16+23*$rate*1/$edge}%;
	background: url("../addons/junsion_qixiqueqiao/template/mobile/img/word2.png") no-repeat;
	background-size: 100% 100%;
}

.word2 {
	top: {php echo 20-$rate*1/$edge}%;
	right: {php echo 16+15*$rate*1/$edge}%;
	background: url("../addons/junsion_qixiqueqiao/template/mobile/img/word1.png") no-repeat;
	background-size: 100% 100%;
}
{else}
.word1 {
	top: {php echo 21-3*($rate-$edge)/(1-$edge)}%;
	left: {php echo 85-9*($rate-$edge)/(1-$edge)}%;
	background: url("../addons/junsion_qixiqueqiao/template/mobile/img/word2.png") no-repeat;
	background-size: 100% 100%;
}

.word2 {
	top: {php echo 16+3*($rate-$edge)/(1-$edge)}%;
	right: {php echo 76-15*($rate-$edge)/(1-$edge)}%;
	background: url("../addons/junsion_qixiqueqiao/template/mobile/img/word1.png") no-repeat;
	background-size: 100% 100%;
}
{/if}

.zhinv {
	position: absolute;
	top: {php echo 10+10*$rate}%;
	{if $rate > 0}left:{php echo 37*$rate}%;{/if}
}
.niulang {
	position: absolute;
	top: {php echo 23-2*$rate}%;
	right: {php echo 25*$rate}%;
	z-index: -1;
}
.lbirds{
	position: absolute;
	top: {php echo 27+6*$rate}%;
	left: {php echo -48+31*$rate}%;
	-webkit-transform: rotate3d(0,0,1,15deg);
}
.rbirds{
	position: absolute;
	top: {php echo 46-3*$rate}%;
	-webkit-transform: rotate3d(0,0,10,15deg);
	left: {php echo 75-28*$rate}%;	
}

@media screen and (max-width: 321px) { 
	.zhinv {
		position: absolute;
		top: {php echo 10+10*$rate}%;
		{if $rate > 0}left:{php echo 35*$rate}%;{/if}
	}
	.niulang {
		position: absolute;
		top: {php echo 23-2*$rate}%;
		right: {php echo 23*$rate}%;
		z-index: -1;
	}
	.lbirds{
		position: absolute;
		top: {php echo 27+8*$rate}%;
		left: {php echo -48+28*$rate}%;
		-webkit-transform: rotate3d(0,0,1,15deg);
	}
	.rbirds{
		position: absolute;
		top: 46%;
		-webkit-transform: rotate3d(0,0,10,15deg);
		left: {php echo 75-25*$rate}%;	
	}
}
</style>
<img class="bg"
	src="{php echo toimage($rule['bg'])}">
<img class="zhinv"
	src="{php echo toimage($rule['zhinv'])}">
<img class="niulang"
	src="{php echo toimage($rule['niulang'])}">
{if $rate <= 0.65}
<div class="word word1">
	<b id="myname">{if $player['myname']}{$player['myname']}{else}牛郎{/if}</b>
</div>
<div class="word word2">
	<b id="hname">{if $player['hname']}{$player['hname']}{else}织女{/if}</b>
</div>
{else}
<div class="word word1">
	<b id="myname">{if $player['hname']}{$player['hname']}{else}织女{/if}</b>
</div>
<div class="word word2">
	<b id="hname">{if $player['myname']}{$player['myname']}{else}牛郎{/if}</b>
</div>
{/if}
<img class="lbirds"
	src="../addons/{php echo $this->modulename}/template/mobile/img/lbirds.png">
<img class="rbirds"
	src="../addons/{php echo $this->modulename}/template/mobile/img/rbirds.png">
{if !empty($rule['content'])}
<div class="panel panel-warning rule">
	<div class="panel-heading" style="padding: 0 15px; text-align: center;">活动细则</div>
	<div class="panel-body" style="height: 100%;overflow-y: auto;">{$rule['content']}</div>
</div>
{/if}
<div id="describe" onclick="$(this).hide()" style="display:none;position: fixed;top:0;background: rgba(0,0,0,.5);width: 100%;height: 100%;z-index: 100;text-align: right; padding: 0 10px;">
	<img  src="../addons/{php echo $this->modulename}/template/mobile/img/describe.png" style="width: 100%;">
</div>